<script setup lang="ts">
import closeIcon from "@/static/images/close-icon.png";
import { textValue } from "@/utils/index";

const uiConfig = {
	labelSpan: 7,
	valueSpan: 17,
};

const props = defineProps<{
	visible: boolean;
	title: string;
	data: any[];
}>();
const emits = defineEmits(["update:visible", "submit"]);

const current = reactive({
	mainOrderNumber: null,
	transportationRoute: null,
	packageNumber: null,
	weight: null,
	allPackageNumber: null,
	trap: null,
	allTrapNumber: null,
});

const networkSelectedOptions = computed(() => {
	const _d = props.data;
	if (_d && _d.length > 0) {
		return _d.map((item) => {
			if (!item.transportationRoute) {
				return;
			}
			return item.transportationRoute
		});
	}
	return [];
});

const handleToClose = () => {
	emits("update:visible", false);
};

const handleSelect = (v) => {
	const _v = v.value;
	const _current = props.data?.find((item) => {
		return item.transportationRoute === _v;
	});
	Object.assign(current, _current);
};

const handleToSubmit = () => {
	emits("submit", current);
	handleToClose();
};

watch(
	() => props.data,
	(val) => {
		if (val && val.length > 0) {
			Object.assign(current, val[0]);
		}
	},
	{ immediate: true },
);
</script>

<template>
	<wd-overlay :lockScroll="true" :show="props.visible">
		<view class="storage-confirm-modal-container">
			<view class="block" @click.stop="">
				<view class="title flex">
					<view class="text">{{ props.title }}</view>
					<wd-img @click="handleToClose" :src="closeIcon" class="close" />
				</view>

				<wd-row class="row m-top">
					<wd-col :span="uiConfig.labelSpan">主单号</wd-col>
					<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
						current.mainOrderNumber
					}}</wd-col>
				</wd-row>
				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">运输路线</wd-col>
					<wd-picker :columns="networkSelectedOptions" :label="null" v-model="current.transportationRoute"
						@confirm="handleSelect" />
				</wd-row>
				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">包装数量</wd-col>
					<wd-col :span="uiConfig.valueSpan">
						<wd-input-number :modelValue="current.packageNumber"
							@update:modelValue="(v) => (current.packageNumber = v)" :min="1" />
						<wd-button class="all-btn" type="primary" size="small" :round="false"
							@click="() => (current.packageNumber = current.allPackageNumber)">选择全部</wd-button>
					</wd-col>
				</wd-row>
				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">重量</wd-col>
					<wd-col :span="uiConfig.valueSpan">
						<wd-input :label="null" clearable v-model="current.weight" placeholder="重量" />
					</wd-col>
				</wd-row>

				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">托盘</wd-col>
					<wd-col :span="uiConfig.valueSpan">
						<wd-input-number :modelValue="current.trap" @update:modelValue="(v) => (current.trap = v)"
							:allow-null="true" :min="1" />
						<!-- <wd-button class="all-btn" type="primary" size="small" :round="false"
							@click="() => (current.trap = current.allTrapNumber)">选择全部</wd-button> -->
					</wd-col>
				</wd-row>

				<view class="footer">
					<wd-button @click="handleToSubmit" class="modal-button" type="primary" :round="false">确认</wd-button>
				</view>
			</view>
		</view>
	</wd-overlay>
</template>

<style lang="less" scoped>
.m-top {
	margin-top: 50px;
}

.storage-confirm-modal-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;

	.block {
		width: 85%;
		height: auto;
		background-color: #fff;
		padding: 30px;

		.title {
			align-items: center;
			justify-content: space-between;

			.text {
				font-size: 40px;
				font-weight: 700;
			}

			.close {
				width: 60px;
				height: 60px;
			}
		}

		.footer {
			margin-top: 80px;
			margin-bottom: 30px;
			display: flex;
			justify-content: center;

			.modal-button {
				width: 300px;
				font-size: 40px;
				line-height: 35px;
				display: flex;
				align-items: center;
			}
		}
	}
}

@import url("./style/row.less");
@import url("./style/form.less");
</style>
